{% extends 'base.html' %}
{% block content %}
<h2>新建订单</h2>
<form method="post">
    {% csrf_token %}
    {% if customers %}
    <div class="form-group">
        <label for="customer_id">客户</label>
        <select name="customer_id" id="customer_id" class="form-control" required onchange="changeCustomer()">
            <option value="">请选择客户</option>
            {% for c in customers %}
            <option value="{{ c.id }}" {% if c.id|stringformat:'s' == selected_customer_id|stringformat:'s' %}selected{% endif %}>{{ c.username }} - {{ c.company_name }}</option>
            {% endfor %}
        </select>
    </div>
    {% endif %}
    <div class="form-group">
        <label for="package">套餐</label>
        <select name="package" id="package" class="form-control" required onchange="calcAmount()">
            <option value="">请选择套餐</option>
            {% for cfg in price_configs %}
            <option value="{{ cfg.package }}" data-price="{{ cfg.price }}" {% if cfg.package == selected_package %}selected{% endif %}>{{ cfg.package }} (￥{{ cfg.price }})</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group">
        <label for="card_count">卡数量</label>
        <input type="number" name="card_count" id="card_count" class="form-control" min="1" value="{{ card_count }}" required onchange="calcAmount()">
    </div>
    <div class="form-group">
        <label for="amount">金额</label>
        <input type="number" step="0.01" name="amount" id="amount" class="form-control" value="{{ amount }}" required>
    </div>
    <div class="form-group">
        <label for="receiver">收件人</label>
        <input type="text" name="receiver" id="receiver" class="form-control" value="{{ receiver }}" >
    </div>
    <div class="form-group">
        <label for="delivery_phone">收货电话</label>
        <input type="text" name="delivery_phone" id="delivery_phone" class="form-control" value="{{ delivery_phone }}" >
    </div>
    <div class="form-group">
        <label for="delivery_address">收货地址</label>
        <input type="text" name="delivery_address" id="delivery_address" class="form-control" value="{{ delivery_address }}" >
    </div>
    <div class="form-group">
        <label for="remark">备注</label>
        <input type="text" name="remark" id="remark" class="form-control" value="{{ remark }}">
    </div>
    <button type="submit" class="btn btn-success">提交</button>
    <a href="/orders/" class="btn btn-secondary">取消</a>
    <script>
    function calcAmount() {
        var pkg = document.getElementById('package');
        var price = pkg.options[pkg.selectedIndex] ? pkg.options[pkg.selectedIndex].getAttribute('data-price') : 0;
        var count = document.getElementById('card_count').value;
        if (price && count) {
            document.getElementById('amount').value = (parseFloat(price) * parseInt(count)).toFixed(2);
        }
    }
    function changeCustomer() {
        // 选客户后仅刷新页面带出客户信息，不提交订单
        var form = document.forms[0];
        var action = form.getAttribute('action') || window.location.pathname;
        var customerId = document.getElementById('customer_id').value;
        var url = action + '?customer_id=' + customerId;
        window.location.href = url;
    }
    </script>
</form>
{% endblock %}
